
<template>
  <div
    ref="chartsRef"
    class="charts"
  ></div>
</template>

<script lang="ts" setup>
const chartsRef = ref<HTMLDivElement | HTMLCanvasElement>();
let timeInterval: NodeJS.Timer | null = null;

const { setOption, chart } = useCharts(chartsRef as Ref<HTMLDivElement>);

let angle = 0;

const dataList = [
  { name: "联网使用单位", value: 200 },
  { name: "数据中心", value: 210 },
  { name: "等级保护单位", value: 220 },
  { name: "网络产品/服务厂商", value: 250 },
  { name: "信息服务单位", value: 300 },
]

const option: any = {
  series: [
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params: any, api: any) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
            startAngle: ((0 + angle) * Math.PI) / 180,
            endAngle: ((90 + angle) * Math.PI) / 180,
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params: any, api: any) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
            startAngle: ((180 + angle) * Math.PI) / 180,
            endAngle: ((270 + angle) * Math.PI) / 180,
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params: any, api: any) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
            startAngle: ((270 + -angle) * Math.PI) / 180,
            endAngle: ((40 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params: any, api: any) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
            startAngle: ((90 + -angle) * Math.PI) / 180,
            endAngle: ((220 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params: any, api: any) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
        let point = getCirlPoint(x0, y0, r, 90 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: "#0CD3DB", //粉
            fill: "#0CD3DB",
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: "", //绿点
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (params: any, api: any) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
        let point = getCirlPoint(x0, y0, r, 270 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: "#0CD3DB", //绿
            fill: "#0CD3DB",
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: "数量",
      type: "pie",
      emphasis: {
        scale: false,
        show: true,
        textStyle: {
          fontSize: "12",
        },
      },
      radius: ["40%", "55%"],
      center: ["50%", "50%"],
      data: dataList,
      label: {
        show: false,
        position: "center",
        formatter: "{text|{b}}\n{c}",
        rich: {
          text: {
            align: "center",
            verticalAlign: "middle",
            padding: 8,
            fontSize: 12,
          },
          value: {
            align: "center",
            verticalAlign: "middle",
            fontSize: 40,
          },
        },

      },
    },
  ],
}

const getCirlPoint = (x0: any, y0: any, r: any, angle: number) => {
  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  return {
    x: x1,
    y: y1,
  };
}

onMounted(() => {
  setOption(option)
  nextTick(() => {
    /** 开启动画 */
    timeInterval = setInterval(() => {
      angle = angle + 3;
      chart.value?.setOption(option, true)
    }, 100)
  })
});

</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>